<template>
  <div class="home-container">
    <!-- 导航 -->
    <van-nav-bar class="app-nav-bar" fixed>
      <div slot="title">
        <van-button
          to="/search"
          class="search-btn"
          slot="title"
          type="info"
          icon="search"
          round
          size="small"
        >
          搜索
        </van-button>
      </div>
      <!-- <div slot="right">
        <van-button
          class="search-btn"
          slot="title"
          type="info"
          icon="search"
          round
          size="small"
        >
          搜索
        </van-button>
      </div>
      <div class="left-icon" slot="left">
      </div> -->
    </van-nav-bar>

    <!-- Tab标签 文章频道列表 
    标签页组件有一个功能，只有你第1次查看标签页的时候才会渲染里面的内容

    <van-tabs
      ref="tabs"
      v-if="channels.length" 
      class="fixed-tabs"
      v-model="active"
      :border="true"
      swipeable
      sticky
    >
    -->
    <van-tabs
      class="channel-tabs"
      ref="tabs"
      v-if="channels.length" 
      v-model="active"
      :border="true"
      swipeable
    >
      <!-- 汉堡按钮定位了，把列表最后的位置给挡住了， 解决办法就是在这里添加一个占位元素-->
      <div slot="nav-right" class="nav-right-placeholder"></div>
      <div 
        slot="nav-right" 
        class="nav-right-wrap"
        @click="isShowPop = true"
      >
        <van-icon name="wap-nav" />
      </div>
      <van-tab
        v-for="(channel, index) in channels"
        :title="channel.name"
        :key="channel.id"
      >
        <!-- 文章列表 -->
        <article-list :channel="channel" />
      </van-tab>
    </van-tabs>

    <!-- 弹出层 -->
    <van-popup
      ref="popupView"
      class="channel-edit-pop"
      v-model="isShowPop"
      closeable
      close-icon-position="top-left"
      position="bottom"
      get-container="body"
      :style="{ height: '100%' }"
    >
      <channel-edit 
        :user-channels="channels"
        :active="active"
        @popupViewClose="popupViewClose"
        @updateActive="updateActive"
      />
      <!--  
        模板中的 $event 表示事件参数
  
      <channel-edit 
        :user-channels="channels"
        @popupViewClose="active = $event"
      />
      -->
    </van-popup>
  </div>
</template>

<script>
import { loadChannelsApi } from "@/api/channel";
import ArticleList from "./components/article-list";
import ChannelEdit from './components/channel-edit';
import {mapState} from 'vuex';
import {getItem} from '@/utils/storage';
import {CHANNELS_KEY} from '@/utils/const';

export default {
  name: "Home",
  components: {
    ArticleList,
    ChannelEdit
  },
  props: {},
  data() {
    return {
      // 控制选中的tab
      active: 0,
      // 频道列表
      channels: [],
      // 是否显示弹出层 - 编辑频道
      isShowPop: false
    };
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {},
  methods: {
    // 请求频道列表
    async loadChannels() {
      let channels = [];
      try {
        if (this.user) {
          // 已登录的请求用户的频道列表
          const { data } = await loadChannelsApi();
          channels= data.data.channels;
          console.log("用户频道列表", data);
        } else {
          const localChannels = getItem(CHANNELS_KEY);
          // 如果有本地存储的频道列表则使用
          if (localChannels) {
            channels = localChannels;
          } else {
            // 用户没有登录，也没有本地存储的频道，则请求默认的推荐
            // 但这次请求没有token
            const { data } = await loadChannelsApi();
            channels= data.data.channels;
          }
        }
        this.channels = channels;

      } catch(error) {
        this.$toast("获取失败")
      }      
    },
    // 关闭弹出层
    popupViewClose(index) {
      this.isShowPop = false;
      this.active = index;
    },
    // 子组件删除频道,更新active。
    updateActive(index) {
      this.active = index;
    }
  },
  created() {
    // 请求频道数据
    this.loadChannels();
  },
  mounted() {},
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.home-container {
  height: 100%;
  .app-nav-bar {
    /deep/ .van-nav-bar__title {
      max-width: none;
    }
    .left-icon {
      background: url("../../assets/logo.png") no-repeat;
      background-size: cover;

      width: 100px;
      height: 30px;
    }
    .search-btn {
      // 只有中间的时候，设置为277px
      width: 277px;
      // 要是两个的话，设置宽度为150px
      // width: 150px;
      height: 32px;
      background: #5babfb;
      border: none;
      .van-icon {
        font-size: 16px;
      }
      .van-button__text {
        font-size: 14px;
      }
    }
  }
  // tab切换
  /deep/ .van-tabs {
    .van-tab {
      border-right: 1px solid #edeff3;
      border-bottom: 1px solid #edeff3;
    }
    .van-tabs__line {
      width: 15px !important;
      background-color: #3296fa;
      bottom: 20px;
    }
  }
  .channel-tabs {
    margin-top: 46px;
    // padding-top: 44px;
    /deep/ .van-tabs__wrap {
      position: fixed;
      top: 46px;
      right: 0;
      left: 0;
      z-index: 2;
    }
    /deep/ .van-tabs__content {
      padding-top: 44px;
    }

  //   /deep/ .van-tab {
  //     border-right: 1px solid #edeff3;
  //     border-bottom: 1px solid #edeff3;
  //   }
  //   /deep/ .van-tabs__line {
  //     width: 16px;
  //     height: 3px;
  //     bottom: 20px;
  //     background: #3296fa;
  //   }
    // 设置宽度没有起作用，因为父元素设置了flex,并且其他子元素是flex:1
    .nav-right-placeholder {
      width: 23px;
      height: 43px;
      flex-shrink: 0;
      // background-color: blue;
    }
    .nav-right-wrap {
      position: fixed;
      right: 0px;

      display: flex;
      justify-content: center;
      align-items: center;

      height: 43px;
      width: 33px;
      background-color: #fff;
      // background-color: aquamarine;
      opacity: .9;
      .van-icon {
        font-size: 26px;
      }
      // 左边的竖线
      &:before {
        content: '';
        position: absolute;
        left:0;
        top: 0;

        background: url("../../assets/line.png") no-repeat;
        background-size: cover;
        width: 1px;
        height: 43px;
      }
    }
  }
}

</style>